import { connect } from "dva";
import styles from "./index.less";
import { Carousel, Popover, SearchBar, List, NavBar } from "antd-mobile";
import logo from "images/logo.png";
import edit from "images/edit@3x.png";
import group from "images/Group3@3x.png";
import iconPayment from "images/index-icon-payment@3x.png";
import iconPromote from "images/index-icon-promote@3x.png";
import iconTo from "images/index-icon-to@3x.png";
import usHop from "images/index-icon-ushop@3x.png";
import indexFill from "images/icon-index-fillter@3x.png";
import userCenter from "images/icon-usercenter-line@3x.png";
import userCenterNews from "images/usercenter-news@3x.png";
import userCenterMyCustomer from "images/usercenter-mycustomer@3x.png";
import userCenterMypromoter from "images/usercenter-mypromoter@3x.png";
import userCenterLevel from "images/usercenter-level@3x.png";
import userCenterPsd from "images/usercenter-password@3x.png";
import unserCenterSet from "images/usercenter-set@3x.png";
import iconMore from "images/icon-more@3x.png";
import lightBack from "images/icon3@3x.png";
import router from "umi/router";
import Pic from "../extensionList/components/card_item";
import customerImg3 from "../../assets/customerImg3.jpg";

const Item = Popover.Item;

const data = ["0", "1", "2", "3", "4"];
var img1 =
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540198824390&di=b8e6d2d52128a5970469121645608031&imgtype=0&src=http%3A%2F%2Fimg.game333.net%2Fuploads%2Fshouyou%2F2017%2F06%2F06%2F2017060615437296.jpg";
var img2 =
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540198824390&di=818c0b1b109509d52f236c424f53a63f&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1708%2F04%2F9712730_1_thumb.jpg";
var img3 =
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540198824390&di=818c0b1b109509d52f236c424f53a63f&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1708%2F04%2F9712730_1_thumb.jpg";
var img4 =
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540198824390&di=818c0b1b109509d52f236c424f53a63f&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1708%2F04%2F9712730_1_thumb.jpg";
var img5 =
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540198824390&di=818c0b1b109509d52f236c424f53a63f&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1708%2F04%2F9712730_1_thumb.jpg";
const imag = [img1, img2, img3, img4, img5];
const drawList = [
  { title: "通知", pic: userCenterNews },
  { title: "我的推广", pic: userCenterMypromoter },
  { title: "我的导购", pic: group },
  { title: "我的客户", pic: userCenterMyCustomer },
  { title: "我的排名", pic: userCenterLevel }
];
const controlList = [
  { title: "变更密码", pic: userCenterPsd },
  { title: "退出登录", pic: unserCenterSet }
];
const popoverStyle = {
  fontSize:"28px",
  display: "flex",
  justifyContent: "center"
};
const popoverStyleFirst = {
  fontSize:"28px",
  display: "flex",
  justifyContent: "center",
  color: "#FD5527"
};
function App({ mainpage, dispatch }) {
  const { showPersonal } = mainpage;
  const onPersonal = () => {
    dispatch({
      type: "mainpage/onPersonal",
      payload: {
        showPersonal: !showPersonal
      }
    });
  };
  const sidebar = () => (
    <div className={styles.drawSiderBar} onClick={onPersonal}>
      <div className={styles.drawBar} onClick={e => e.stopPropagation()}>
        <div className={styles.drawHeader}>
          <div className={styles.headPic}>
            <div>
              <img
                src={
                  "http://img0.imgtn.bdimg.com/it/u=3241588302,133653846&fm=26&gp=0.jpg"
                }
                className={styles.headPicture}
              />
            </div>
          </div>
          <div className={styles.personalInf} onClick={()=>router.push('personalitySignature')}>
            <div className={styles.name}>哈利波特223456</div>
            <div className={styles.notes}>
              <div>签名：这个人很懒，什么都没留下...</div>
              <div className={styles.editPic}>
                <img src={edit} className={styles.editPicture} />{" "}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.headGap} />
        <div>
          {drawList.map((i, index) => {
            return (
              <List.Item
                className={styles.listItems}
                key={index}
                arrow="horizontal"
                thumb={i.pic}
                onClick={() => {
                  switch (index) {
                    case 0:
                      router.push("notice");
                      break;
                    case 1:
                      router.push("myPromote");
                      break;
                    case 2:
                      router.push("myShoppingGuide");
                      break;
                    case 3:
                      router.push("myCustomer");
                      break;
                    case 4:
                      router.push("myRanking");
                      break;
                    default:
                      break;
                  }
                }}
              >
                {i.title}
              </List.Item>
            );
          })}
        </div>
        <div className={styles.grayGapLine} />
        <div className={styles.whiteGapArea} />
        <div>
          {controlList.map((i, index) => {
            return (
              <List.Item
                className={styles.listItems}
                key={index}
                arrow="horizontal"
                thumb={i.pic}
                onClick={() => {
                  switch (index) {
                    case 0:
                      router.push("originalPwdVerfication");
                      break;
                    case 1:
                      router.push("login");
                      break;
                    default:
                      break;
                  }
                }}
              >
                {i.title}
              </List.Item>
            );
          })}
        </div>
      </div>
    </div>
  );
  return (
    <div className={styles.normal}>
      {showPersonal && sidebar()}
      <div>
        <div className={styles.setPositon}>
          <div className={styles.headTabBar}>
            <img src={logo} className={styles.logoPicture} />
          </div>
          <SearchBar className={styles.searchbar} placeholder="热搜关键词" />
          <img
            src={userCenter}
            className={styles.userCenterPic}
            onClick={onPersonal}
          />
        </div>
        <Carousel>
          {data.map(val => (
            <a key={val} className={styles.carouselContent}>
              <img src={imag[val]} alt="" className={styles.carouselPicture} />
            </a>
          ))}
        </Carousel>
      </div>
      <div className={styles.tabbar}>
        <div className={styles.tabItem}>
          <a onClick={() => router.push("extensionList")}>
            <img src={iconPromote} className={styles.midIcon} />
          </a>
          <a onClick={() => router.push("extensionList")}>
            <div className={styles.midText}>推广</div>
          </a>
        </div>
        <div className={styles.tabItem}>
          <a onClick={() => router.push("orderIdRecord")}>
            <img src={iconTo} className={styles.midIcon} />
          </a>
          <a onClick={() => router.push("orderIdRecord")}>
            <div className={styles.midText}>揽装</div>
          </a>
        </div>
        <div className={styles.tabItem}>
          <a onClick={() => router.push("myCommission")}>
            <img src={iconPayment} className={styles.midIcon} />
          </a>
          <a onClick={() => router.push("myCommission")}>
            <div className={styles.midText}>佣金</div>
          </a>
        </div>
        <div className={styles.tabItem}>
          <a onClick={() => router.push("orderForGuestConfirm")}>
            <img src={usHop} className={styles.midIcon} />
          </a>
          <a onClick={() => router.push("orderForGuestConfirm")}>
            <div className={styles.midText}>代客下单</div>
          </a>
        </div>
      </div>
      <div className={styles.topGrayGap} />
      <div className={styles.listHeader}>
        <div className={styles.listHeaderLeft}>到店客户</div>
        <div
          className={styles.listHeaderRight}
          onClick={() => router.push("reachStoreCustomer")}
        >
          <div>筛选</div>
          <img src={indexFill} className={styles.selectedIcon} />
        </div>
      </div>
      <div className={styles.customerList}>
        <div
          className={styles.customerModule}
          onClick={() => router.push("customerDetail")}
        >
          <img className={styles.customerImg} src={customerImg3} />
          <div className={styles.detailRight}>
            <span className={styles.customerName}>张三</span>
            <div>
              <span className={styles.reachTime}>10：32到店</span>
              <span className={styles.reachCount}>到店8次</span>
            </div>
            <span className={styles.lastTimeBuy}>上次购买商品：无</span>
            <div className={styles.browse}>
              <span className={styles.tabBlue}>浏览</span>
              <span className={styles.productInfo}>
                正在浏览商品：iphonex 64G 黑色
              </span>
              <span className={styles.browseTime}>3分钟</span>
            </div>
            <div>
              <span className={styles.tabRed}>推荐</span>
              <span className={styles.recommendInfo}>
                可推荐商品：乐享4G不限流量套餐320元
              </span>
            </div>
          </div>
        </div>
        <div
          className={styles.customerModule}
          onClick={() => router.push("customerDetail")}
        >
          <img className={styles.customerImg} src={customerImg3} />
          <div className={styles.detailRight}>
            <span className={styles.customerName}>张三</span>
            <div>
              <span className={styles.reachTime}>10：32到店</span>
              <span className={styles.reachCount}>到店8次</span>
            </div>
            <span className={styles.lastTimeBuy}>上次购买商品：无</span>
            <div className={styles.browse}>
              <span className={styles.tabBlue}>浏览</span>
              <span className={styles.productInfo}>
                正在浏览商品：iphonex 64G 黑色
              </span>
              <span className={styles.browseTime}>3分钟</span>
            </div>
            <div>
              <span className={styles.tabRed}>推荐</span>
              <span className={styles.recommendInfo}>
                可推荐商品：乐享4G不限流量套餐320元
              </span>
            </div>
          </div>
        </div>
        <div
          className={styles.customerModuleLast}
          onClick={() => router.push("customerDetail")}
        >
          <img className={styles.customerImg} src={customerImg3} />
          <div className={styles.detailRight}>
            <span className={styles.customerName}>张三</span>
            <div>
              <span className={styles.reachTime}>10：32到店</span>
              <span className={styles.reachCount}>到店8次</span>
            </div>
            <span className={styles.lastTimeBuy}>上次购买商品：无</span>
            <div className={styles.browse}>
              <span className={styles.tabBlue}>浏览</span>
              <span className={styles.productInfo}>
                正在浏览商品：iphonex 64G 黑色
              </span>
              <span className={styles.browseTime}>3分钟</span>
            </div>
            <div>
              <span className={styles.tabRed}>推荐</span>
              <span className={styles.recommendInfo}>
                可推荐商品：乐享4G不限流量套餐320元
              </span>
            </div>
          </div>
        </div>
        <img
          src={iconMore}
          className={styles.iconMorePic}
          onClick={() => router.push("reachStoreCustomer")}
        />
      </div>
      <div className={styles.topGrayGap} />
      <div className={styles.bottomListHeader}>
        <div className={styles.listHeaderLeft} onClick={() => router.push("extensionList")}>推广推荐</div>
        <Popover
          overlayClassName="fortest"
          overlayStyle={{ color: "currentColor" }}
          visible={false}
          overlay={[
            <Item key="4" value="4" style={popoverStyleFirst}>
              默认
            </Item>,
            <Item key="5" value="5" style={popoverStyle}>
              热度
            </Item>,
            <Item key="6" value="6" style={popoverStyle}>
              点击率
            </Item>,
            <Item key="7" value="7" style={popoverStyle}>
              优惠券
            </Item>
          ]}
        >
          <div className={styles.defaultIcon}>
            默认推荐
            <img src={lightBack} className={styles.tan} />
          </div>
        </Popover>
      </div>
      <div className={styles.secondList}>
        <Pic name="iponex 64G 黑色只售2888" />
        <Pic name="国庆满300减100优惠券领取" />
        <Pic name="国庆满300减100优惠券领取" />
        <img
          src={iconMore}
          className={styles.secondMoreIcon}
          onClick={() => router.push("extensionList")}
        />
      </div>
    </div>
  );
}
export default connect(({ mainpage }) => ({ mainpage }))(App);
